import { reactive } from "vue";

const Chart = reactive({
  curNow: 0,
  tablist: [
    {
      title: "日",
      value: 1,
    },
    {
      title: "月",
      value: 2,
    },
    {
      title: "年",
      value: 3,
    },
  ],
  chartData: {},
  ops: {
    rotate: false,
    rotateLock: false,
    color: ["#2478f2", "#5f9cf8", "#84b7f9", "#aad0fb", "#cee5fc"],
    padding: [5, 5, 5, 5],
    dataLabel: true,
    enableScroll: false,
    legend: {
      show: true,
      position: "bottom",
      lineHeight: 25,
    },
    title: {
      name: "",
      fontSize: 15,
      color: "#666666",
    },
    subtitle: {
      name: "",
      fontSize: 25,
      color: "#7cb5ec",
    },
    extra: {
      ring: {
        ringWidth: 40,
        activeOpacity: 0.5,
        activeRadius: 10,
        offsetAngle: 0,
        labelWidth: 15,
        border: true,
        borderWidth: 3,
        borderColor: "#FFFFFF",
      },
    },
  },
});

const getChartData = (data: any) => {
  //模拟从服务器获取数据时的延时
  setTimeout(() => {
    //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
    let res = {
      series: [
        {
          data: [
            { name: "现金", value: 50 },
            { name: "会员卡", value: 30 },
            { name: "微信", value: 20 },
            { name: "套餐卡", value: 18 },
            { name: "支付宝", value: 8 },
          ],
        },
      ],
    };
    Chart.chartData = JSON.parse(JSON.stringify(res));
  }, 500);
};

export default {
  Chart,
  getChartData,
};
